<template>
  <q-responsive :ratio="ratio">
    <div
      class="column video-card-small fit"
      @mouseover="isHover = true"
      @mouseout="isHover = false"
    >
      <div class="preview col">
        <q-img
          class="image"
          :src="video.coverImage"
          @click="gotoVideo()"
          width="100%"
          height="100%"
        >
          <template v-slot:error>
            <div class="absolute-full flex flex-center bg-negative text-white">
              Cannot load image
            </div>
          </template>
        </q-img>
        <q-btn
          class="bookmark-btn"
          size="10px"
          icon="mdi-pin"
          color="primary"
          style="top: 8px; right: 8px"
          dense
          @click="addShortcuts"
        >
          <q-tooltip
            anchor="center left"
            self="center right"
            :offset="[0, 0]"
            transition-show="fade"
            transition-hide="fade"
          >
            <div class="bookmark-btn-tooltip">PIN TO SHOTCUTS</div>
          </q-tooltip>
        </q-btn>
        <q-btn
          class="bookmark-btn"
          size="10px"
          icon="mdi-playlist-plus"
          color="primary"
          style="top: 40px; right: 8px"
          dense
          @click="addPlaylist"
          v-show="isHover"
        >
          <q-tooltip
            anchor="center left"
            self="center right"
            :offset="[0, 0]"
            transition-show="fade"
            transition-hide="fade"
          >
            <div class="bookmark-btn-tooltip">SAVE TO PLAYLIST</div>
          </q-tooltip>
        </q-btn>
        <div class="duration-text">{{ video.durationLabel }}</div>
      </div>
      <div class="info-container column">
        <div class="hover-info text-no-wrap one-line-text" v-show="isHover">
          {{ video.creatorName }}
        </div>
        <div class="title one-line-text">{{ video.title }}</div>
        <div class="create-time">{{ video.createTimeHuman }}</div>
      </div>
      <div class="translator-container row items-center no-wrap">
        <q-avatar class="q-mx-sm" size="40px">
          <img :src="video.creatorAvatar" />
        </q-avatar>
        <div class="column col justify-center no-wrap">
          <div class="one-line-text creator-name" style="font-size: 12px">
            {{ video.creatorName }}
          </div>
          <div class="row">
            <lang-chip code="en-US"></lang-chip>
          </div>
        </div>
      </div>
    </div>
  </q-responsive>
</template>
<script lang="ts">
import Video from 'src/models/Video';
import { defineComponent, ref, PropType } from 'vue';
import { useRouter } from 'vue-router';
import LangChip from '../LanguageChip.vue';
export default defineComponent({
  name: 'video-card-sm',
  components: {
    LangChip,
  },
  props: {
    video: {
      type: Object as PropType<Video>,
      required: true,
    },
    ratio: {
      type: Number,
      default: 4 / 3.2,
    },
  },
  setup(props) {
    const router = useRouter();
    const isHover = ref(false);
    return {
      isHover,
      gotoVideo(langCode = '') {
        if (props) {
          void router.push({
            name: 'Video',
            params: {
              id: props.video.id,
            },
          });
        }
      },
      addShortcuts() {
        console.log('Adding to Bookmark');
      },
      addPlaylist() {
        console.log('Adding to Bookmark');
      },
    };
  },
});
</script>
<style lang="scss" scoped>
.video-card-small {
  cursor: default;
  .preview {
    position: relative;
    .bookmark-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 28px;
      height: 28px;
    }
    .duration-text {
      position: absolute;
      bottom: 4px;
      right: 4px;
      font-size: 9px;
      background-color: #1c1c1c;
      padding: 2px 4px;
    }
  }
  .info-container {
    background-color: #1c1c1c;
    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.4);
    z-index: 3;
    height: 52px;
    padding: 4px 12px;
    position: relative;
    max-width: 100%;
    .hover-info {
      top: -24px;
      position: absolute;
      background: rgba(16, 16, 16, 0.8);
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 12px;
      max-width: 70%;
    }
    .title {
      max-width: 100%;
      font-size: 14px;
    }
    .create-time {
      font-size: 12px;
      color: #808080;
    }
  }
  .translator-container {
    background-color: #242424;
    height: 52px;
    width: 100%;
    max-width: 100%;
    .creator-name {
      max-width: 90%;
    }
  }
}
</style>
